<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>

<body>
    <div class="box">
        <h2 id="test">Login</h2>
        <form>
            <div class="inputBox">
                <input type="text" name="account" required="" id="account">
                <label>用户名</label>
            </div>
            <div class="inputBox">
                <input type="password" name="password" required="" id="password">
                <label>密码</label>
            </div>
            <input type="button" value="登录" id="btn">
            <a style="color: blue;float:right;" href="register.html">注册账号</a>
        </form>
    </div>

</body>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        $("#btn").click(function() {
            console.log($("#account").val() + ">>>>>>>" + $("#password").val())
            $.ajax({
                type: "POST",
                url: "http://localhost:8080/manager/login",
                data: {
                    account: $("#account").val(),
                    password: $("#password").val()
                },
                dataType: "json",
                success: function(data) {
                    console.log(data)
                    if (data == null) {
                        alert("登录失败，账号或密码错误！")
                        return;
                    }
                    sessionStorage.setItem("userId", data.id)
                    sessionStorage.setItem("role", data.roleId)
                    window.location.href = "index.html"
                },
                fail: function() {
                    alert("系统繁忙")
                }
            });
        })
    })
</script>

<style>
    body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        background: url("img/login-bgd.jpg");
        background-size: cover;
    }
    
    .box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        padding: 40px;
        background: rgba(0, 0, 0, .8);
        box-sizing: border-box;
        box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
        border-radius: 10px;
        /*登录窗口边角圆滑*/
    }
    
    .box h2 {
        margin: 0 0 30px;
        padding: 0;
        color: #fff;
        text-align: center;
    }
    
    .box .inputBox {
        position: relative;
    }
    
    .box .inputBox input {
        width: 100%;
        padding: 10px 0;
        font-side: 16px;
        color: #fff;
        letter-spacing: 1px;
        margin-bottom: 30px;
        /*输入框设置*/
        border: none;
        border-bottom: 1px solid #fff;
        outline: none;
        background: transparent;
    }
    
    .box .inputBox label {
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px 0;
        font-size: 16px;
        color: #fff;
        pointer-events: none;
        transition: .5s;
    }
    
    .box .inputBox input:focus~label,
    .box .inputBox input:valid~label {
        top: -18px;
        left: 0;
        color: #03a9f4;
        font-size: 12px;
    }
    
    .box input[type="submit"] {
        background: transparent;
        border: none;
        outline: none;
        color: #fff;
        background: #03a9f4;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
    }
    
    .input[type="submit"] {
        align-self: center;
    }
</style>

</html>